<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="考评记录" name="first">
        <div style="margin-bottom: 10px">
          <el-tag type="success"><span style="font-size: 20px;font-weight: bold">考评记录</span></el-tag>
        </div>
        <el-table :data="myAppraiseList" style="width: 100%;margin-top:30px;" border>
          <el-table-column align="center" prop="name" label="名字">
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="appraiseDate" label="考评日期">
            <template slot-scope="scope">
              <el-date-picker readonly v-model="scope.row.appraiseDate" type="date" placeholder="考评日期"></el-date-picker>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="content" label="考评内容" width="180">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="downloadFile(scope.row.content)">
                下载
              </el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="remark" label="备注">
            <template slot-scope="scope">
              {{ scope.row.remark }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="remark" label="结果">
            <template slot-scope="scope">
              <el-select v-model="scope.row.result" disabled style="margin-left: 10px;width: 80%" placeholder="结果">
                <el-option
                  v-for="status in appraiseResultEnum"
                  :key="status.value"
                  :label="status.label"
                  :value="status.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="remark" label="状态">
            <template slot-scope="scope">
              <el-select v-model="scope.row.status" disabled style="margin-left: 10px;width: 80%" placeholder="状态">
                <el-option
                  v-for="status in statusEnum"
                  :key="status.value"
                  :label="status.label"
                  :value="status.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="我的部门考评" name="second" v-if="isLeader">
        <div style="margin-bottom: 10px">
          <el-tag type="info"><span style="font-size: 20px;font-weight: bold">我的部门考评</span></el-tag>
        </div>
        <el-table :data="appraiseList" style="width: 100%;margin-top:30px;" border>
          <el-table-column align="center" prop="name" label="名字">
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="appraiseDate" label="考评日期">
            <template slot-scope="scope">
              <el-date-picker readonly v-model="scope.row.appraiseDate" type="date" placeholder="考评日期"></el-date-picker>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="content" label="考评内容" >
            <template slot-scope="scope">
              <el-upload
                class="upload-demo"
                ref="upload"
                action=""
                accept="image/jpeg,image/jpg,image/png,pdf"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :limit="1"
                :on-exceed="handleExceed"
                :file-list="fileList"
                :http-request="upload">
                <el-button size="mini" type="primary">上传</el-button>
              </el-upload>
              <el-button type="primary" size="mini" @click="downloadFile(scope.row.content)" style="margin: 5px">
                下载
              </el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="remark" label="备注">
            <template slot-scope="scope">
              {{ scope.row.remark }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="remark" label="结果">
            <template slot-scope="scope">
              <el-select v-model="scope.row.result" disabled style="margin-left: 10px;width: 80%" placeholder="结果">
                <el-option
                  v-for="status in appraiseResultEnum"
                  :key="status.value"
                  :label="status.label"
                  :value="status.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="remark" label="状态">
            <template slot-scope="scope">
              <el-select v-model="scope.row.status" disabled style="margin-left: 10px;width: 80%" placeholder="状态">
                <el-option
                  v-for="status in statusEnum"
                  :key="status.value"
                  :label="status.label"
                  :value="status.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="评级操作">
            <template slot-scope="scope">
              <el-select v-model="scope.row.result" style="margin-left: 10px;width: 80%" placeholder="评级"
                         @change="changeStatus(scope)">
                <el-option
                  v-for="status in appraiseResultEnum"
                  :key="status.value"
                  :label="status.label"
                  :value="status.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getMemberAppraise, getMyAppraise, modifyAppraise, modifyAppraiseType } from '@/api/appraise'
import { checkLeader } from '@/api/department'
import { download, upload } from '@/api/file'

const defaultAppraise = {
  id: ''
}
export default {
  name: 'AppraiseMine',
  data() {
    return {
      appraise: Object.assign({}, defaultAppraise),
      activeName: 'first',
      appraiseList: [],
      myAppraiseList: [],
      isLeader: false,
      statusEnum: [
        {value: 'FALSE', label: "已生效"},
        {value: 'TRUE', label: "未生效"},
      ],
      fileList: [],
      appraiseResultEnum: [
        {value: 'A', label: "优秀"},
        {value: 'B', label: "良好"},
        {value: 'C', label: "及格"},
        {value: 'D', label: "不及格"},
        {value: 'OTHER', label: "待审核"},
      ],
    }
  },
  created() {
    this.checkLeader()
    this.getMyAppraise()
  },
  methods: {
    handleClick(tab, event) {
      if ('first' === this.activeName) {
        this.getMyAppraise()
      } else {
        this.getDepartmentAppraise()
      }
    },
    async getMyAppraise() {
      await getMyAppraise().then((res) => {
        this.myAppraiseList = res.data
      })
    },
    async getDepartmentAppraise() {
      await getMemberAppraise().then((res) => {
        this.appraiseList = res.data
      })
    },
    async checkLeader() {
      const res = await checkLeader();
      this.isLeader = res
    },
    async changeStatus({ $index, row }){
      this.$confirm('确定要修改评级吗?', 'Warning', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await modifyAppraiseType(row.id, row.result)
          // this.userList.splice($index, 1)
          this.$message({
            type: 'success',
            message: '评级成功!'
          })
        })
        .catch(err => {
          console.error(err)
        })
      await this.getDepartmentAppraise()
    },
    async downloadFile(fileName) {
      await download(fileName).then(res => {           //定义文件名等相关信息
        const blob = res
        const reader = new FileReader()
        reader.readAsDataURL(blob)
        reader.onload = (e) => {
          const a = document.createElement('a')
          a.download = fileName
          a.href = e.target.result
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
        }
      })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.appraise.content = ''
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    async upload() {
      let form = new FormData();
      this.$refs.upload.uploadFiles.forEach((file) => {
        form.append("file", file.raw);
      });
      await upload(form).then((res) => {
        this.appraise = Object.assign({}, defaultAppraise)
        this.appraise.content = res.data
        modifyAppraise(id, this.appraise)
        // console.log(this.contract.fileId)
      })
    },
  }
}
</script>

<style scoped>

</style>
